<template>
	<div class="simple-detail">
		<div class="simple-title" v-if="detailPics.length > 0">
			<i></i>
			<p>宝贝详情</p>
			<i></i>
		</div>
		<div class="simple-images">
			<img v-lazy="item" v-for="(item, index) in detailPics" :key="index" alt="" v-if="item"/>
		</div>
	</div>
</template>

<script>
export default {
	name: 'SimpleDetail',
	props: {
		goodsInfo: {
			type: Object
		}
	},
	data() {
		return {
			detailPics: []
		};
	},
	created() {
		if (this.goodsInfo.detailPics) {
			this.detailPics = this.goodsInfo.detailPics.split(',');
		}
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.simple-detail {
	.simple-title {
		@include flexBox(center, center);
		p {
			color: #8d8d8d;
			margin: 20px;
			font-size: 28px;
		}
		i {
			width: 70px;
			height: 2px;
			background: #c6c6c6;
		}
	}
	.simple-images {
		img {
			width: 100%;
			display: block;
		}
	}
}
</style>
